<template>
   <div class = "teammain">
       <p class= "teamhead"><i class="el-icon-s-promotion"> 球队列表 ></i></p>
       <div class="teamlist">
           <div class="teamhr">
             <hr style="width:5px;height:200px;background-color:rgb(0,88,150)">
             <p>西部</p>
               <hr style="width:5px;height:200px;background-color:rgb(0,88,150)">
               <p>东部</p>
               <hr style="width:5px;height:200px;background-color:rgb(0,88,150)">
           </div>
             <div class="teamwest">
                <div class="teamone" v-for="team in westlist" :key="team.id" @click="teaminfo(team.id)" >
                  <img :src="team.cover" alt="">
                  <p>{{team.name}}</p>
                </div>
            </div>
            
            <div class="teameast">
              <div class="teamone" v-for="team in eastlist" :key="team.id" @click="teaminfo(team.id)" >
                  <img :src="team.cover" alt="">
                  <p>{{team.name}}</p>
                </div>
             </div>
       </div>


    </div>
</template>

<script>
import team from '@/api/team'
export default {
      data() {
          return{
            eastlist:[],
            westlist:[]
          }
      },
      created(){
          this.getWestteam()
          this.getEastteam()
      },
       methods: {
            getWestteam(){
              team.getWestteam()
              .then(response =>{
                this.westlist = response.data.westteam
              })
            },
            getEastteam(){
              team.getEastteam()
              .then(response =>{
                console.log(response.data.eastteam)
                this.eastlist = response.data.eastteam
              })
            },
            teaminfo(id){
                this.$router.push({ path:'/team/'+id  })
            }
       }
}
</script>

<style>
.teammain{
   width:100%;
   background-color: rgb(238,238,238);
   padding-top:80px;
   display: inline-block;
   overflow: hidden;
   min-height: 1000px;
}
.teamhead{
    font-size:18px;
    margin-left:10%;
}
.el-icon-s-promotion{
    color:rgb(0,98,161)
}
.teamlist{
   width: 80%;
   min-height:800px;
   background-color:white;
   margin-left:10%;
   box-shadow: 0 0 10px #ddd;
   margin-top: 30px;
   position: relative;

}
.teamhr{
  position: absolute;
  left: 30px;
  top:10px;
}
.teamwest{
  width: 90%;
  min-height: 340px;
  position: absolute;
  top:35px;
  left:100px;
}
.teameast{
  width: 90%;
  min-height: 340px;
  position: absolute;
  top:430px;
  left:100px;

}
.teamone{
  position: relative;
  width:180px;
  height:110px;
  display:inline-block;
  cursor: pointer;
}
.teamone img{
  position: absolute;
  width: 100px;
  max-height: 90px;
  border-radius: 50%;
}
.teamone p {
 position: absolute;
 left:110px;
 top:30px;
}
</style>

